<template>
    <div>
        <el-drawer :append-to-body="true" title="发起人" v-model="store.state.form.promoterDrawer" direction="rtl" size="550px"> 
            <div class="demo-drawer__content">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="设置发起人" name="first">
                        <p>发起人类型</p>
                        <div class="mb-2 flex items-center text-sm">
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large">组织内成员</el-radio>
                                <el-radio label="2" size="large">组织外成员</el-radio>
                            </el-radio-group>
                        </div>
                        <p>谁可以提交</p>
                        <div v-if="namelist.length>0" class="mt-button" @click="savePromoter"><span v-for="item in namelist" :key="item">{{item.name}}<span v-if="namelist.length>1">,</span></span></div>
                        <div v-if="namelist.length==0" class="mt-button" @click="savePromoter">请选择</div>
                    </el-tab-pane>
                    <el-tab-pane label="表单操作权限" name="second">
                        <div class="fields">
                            <el-radio-group v-model="radio1" class="ml-4">
                                <p>表单字段</p>
                                <el-radio label="1" size="large">可编辑</el-radio>
                                <el-radio label="2" size="large">只读</el-radio>
                                <el-radio label="3" size="large">隐藏</el-radio>
                            </el-radio-group>
                        </div>
                    </el-tab-pane>
                    <div class="topsw">
                        <el-button @click="closeDrawer">取消</el-button>
                        <el-button type="primary" @click="submits">提交</el-button>
                    </div>
                </el-tabs>
            </div>
            <!-- 谁可以提交 -->
            <el-dialog
                v-model="dialogVisible"
                title="以下部门和人员可看到审批模板"
                width="47%"
            >
                <emplteedog @submitsxm="dialogshow" @sxdown="(val)=>{dialogVisible=val}"></emplteedog>
            </el-dialog>
            
        </el-drawer>
    </div>
</template>
<script>
import { computed, onMounted, ref, watch } from 'vue'
 import { useStore } from '/@/store/index';
  import funct from '/@/utils/preload.js'
  import emplteedog from "../dialog/employeesDialog.vue"
export default {
    components:{emplteedog},
    setup(){
        let store = useStore()
        let namelist = ref([])
        const activeName = ref('first')
        let flowPermission=ref([])
        let radio1 = ref('1')
        let promoterVisible=ref(false)
        let dialogVisible = ref(false)
        let checkedList=ref([])
        let searchVal = ref('')
        // 关闭
        function closeDrawer(){
            store.commit('updatePromoter',false)
        }
        function savePromoter(){
            dialogVisible.value=true
        }
        function handleClick(tab,event){
            console.log(tab, event)
        }
        // 搜索成员 输入框
        function getDebounceData(event,activeName){
            console.log(event,activeName,searchVal.value);
        }
        function dialogshow(val,arr){
            console.log(val,arr);
            dialogVisible.value=val
            namelist.value=arr
        }
        function submits(){
            console.log({
                value:namelist.value,
                flag:true,
                id:store.state.form.flowPermission
            });
            let form = store.state.form.flowPermission.value
            form.nodeUserList=namelist.value
            store.commit('updateFlowPermission',{
                value:form,
                flag:true,
                id:store.state.form.flowPermission.id
            })
            closeDrawer()
        }
        return {
            flowPermission,
            promoterVisible,
            checkedList,
            store,
            funct,
            closeDrawer,
            handleClick,
            activeName,
            dialogVisible,
            savePromoter,
            searchVal,
            getDebounceData,
            namelist,
            dialogshow,
            radio1,
            submits
        }
    }
}
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 10px;
  color: #6b778c;
  font-weight: 600;
}
.el-drawer .el-drawer__header{
    font-size: 18px !important;
}
.demo-tabs p{
    font-size: 15px;
}
.mt-button{
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    padding: 8px 19px;
    font-size: 12px;
    box-sizing: border-box;
    margin-top: 5px;
    cursor: pointer;
}
.topsw{
    margin-top: 10px;
}
.fields p{
    margin-right: 20px;
}
</style>